import {
  DotChartOutlined,
  DownOutlined,
  ExclamationCircleOutlined,
  FullscreenOutlined,
  SettingOutlined,
  UserOutlined,
  WarningOutlined,
} from "@ant-design/icons";
import { Alert, Button, Dropdown, MenuProps, Modal, Spin } from "antd";
import { stringify } from "querystring";
import React, { useState } from "react";
import { history, useModel } from "umi";
import "./index.less";
import { logout } from "@/services/system/session";

import api from "@/api";
import { Utils } from "knowdesign";
import HttpUtils from "@/utils/HttpUtils";

export type GlobalHeaderRightProps = {
  menu?: boolean;
};

/**
 * 退出登录，并且将当前的 url 保存
 */
const loginOut = async () => {
  await logout();
  document.cookie =
    "JSESSIONID=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
  const { query = {}, pathname } = history.location;
  const { redirect } = query;
  // Note: There may be security issues, please note
  if (window.location.pathname !== "/user/login" && !redirect) {
    history.replace({
      pathname: "/user/login",
      search: stringify({
        redirect: "/welcome",
      }),
    });
  }
};

const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
  // const { initialState, setInitialState } = useModel("@@initialState");

  const userInfo = localStorage.getItem("userInfo");
  const [isModalOpen, setIsModalOpen] = useState(false);

  const logout = () => {
    HttpUtils.post(
      api.logout,
      {},
      {},
    ).then((res) => {
      console.log(res);
      window.location.href = "/user/login";
      localStorage.removeItem("userInfo");
    });
    
  };

  // const logout = () => {
  //   Utils.request(api.logout, {
  //     method: "POST",
      
  //   }).then((res) => {
  //     console.log(res);
  //     window.location.href = "/user/login";
  //     localStorage.removeItem("userInfo");
  //   });
  // };

  const items: MenuProps["items"] = [
    {
      label: <a onClick={() => {}}>版本：0.1.1</a>,
      key: "1",
    },
    {
      label: (
        <a
          onClick={() => {
            logout();
          }}
        >
          退出登录
        </a>
      ),
      key: "2",
    },
  ];

  return (
    <>
      {/* <Dropdown menu={{ items }} trigger={["click"]}>
        <a onClick={(e) => e.preventDefault()}>
          <div style={{ color: "#000" }}>
            {userInfo ? JSON.parse(userInfo)?.data?.realName : "test"}
            <DownOutlined style={{ marginLeft: 2, color: "#000" }} />
          </div>
        </a>
      </Dropdown> */}

      <div
        className="right"
        style={{
          justifyContent: "center",
          alignItems: "center",
          height: 48,
          display: "flex",
        }}
      >
        {/* <button
          type="button"
          className="dcloud-btn dcloud-btn-primary dcloud-btn-sm dcloud-btn-background-ghost quick-entry"
          style={{ marginRight: 16 }}
        >
          <span className="content">多集群管理</span>
        </button> */}
        <button
          type="button"
          className="dcloud-btn dcloud-btn-sm quick-entry"
          style={{ marginRight: 16 }}
          onClick={() => {
            history.push("/config");
          }}
        >
          <span className="content">
            <SettingOutlined style={{ color: "#495057" }} /> 系统管理
          </span>
        </button>

        <div className="vertical-line"></div>

        <div>
          <FullscreenOutlined style={{ color: "#495057", fontSize: 18 }} />
          {/* <DotChartOutlined /> */}
        </div>

        <Dropdown menu={{ items }} trigger={["hover"]}>
          {/* <div className="wf-head">
            <UserOutlined />
          </div> */}
          <a onClick={(e) => e.preventDefault()}>
            <div
              style={{
                color: "#495057",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                paddingLeft: 32,
              }}
            >
              <div className="wf-head">
                <UserOutlined style={{ color: "#fff" }} />
              </div>
              <div style={{ fontSize: 14, color: "#495057", marginRight: 8 }}>
                {userInfo ? JSON.parse(userInfo)?.data?.userName : ""}
              </div>
            </div>
          </a>
        </Dropdown>
      </div>

      <Modal
        title="提示"
        style={{ zIndex: 3001 }}
        open={isModalOpen}
        centered={true}
        width={420}
        onOk={() => {
          setIsModalOpen(false);
          // setInitialState((s) => ({ ...s, currentUser: undefined }));
          loginOut();
        }}
        onCancel={() => {
          setIsModalOpen(false);
        }}
        // mask={false}
      >
        <div className="logOut-outer-container">
          <div className="logOut-inner-container">
            <span
              className="logOutMessage"
              style={{ fontSize: "100%", marginLeft: 4 }}
            >
              <ExclamationCircleOutlined
                className="logOutWaring"
                style={{ color: "white", fontSize: "120%" }}
              />
              <span style={{ marginLeft: 4 }}>确定注销并退出系统吗？</span>
            </span>
          </div>
        </div>
      </Modal>
    </>
  );
};

export default AvatarDropdown;
